<template>
  <div class="detail">
    <div class="message">
      <div class="title">{{ msg.userName + "个人信息" }}</div>
      <div>
        <div class="message-content">
          <div class="left">姓名：</div>
          <div class="right">{{ msg.userName }}</div>
        </div>
        <div class="message-content">
          <div class="left">学校：</div>
          <div class="right">{{ msg.school }}</div>
        </div>
        <div class="message-content">
          <div class="left">地址：</div>
          <div class="right">{{ msg.address }}</div>
        </div>
        <div class="message-content">
          <div class="left">手机号码：</div>
          <div class="right">{{ msg.phoneNumber }}</div>
        </div>
        <div class="message-content">
          <div class="left">Gitee账号：</div>
          <div class="right">{{ msg.giteeAccount }}</div>
        </div>
        <div class="message-content">
          <div class="left">电子邮箱：</div>
          <div class="right">{{ msg.email }}</div>
        </div>
        <div class="message-pic">
          <div class="left">学生证：</div>
        </div>
        <div class="message-pic" :class="{ pic: msg.studentImage }">
          <img :src="msg.studentImage" alt="" />
        </div>
        <div class="message-pic">
          <div class="left">任务申领书：</div>
        </div>
        <div class="message-book">
          <div class="right" v-if="msg.knotImage">
            <img src="../assets/images/downfile.png" alt="" />
            <a :href="msg.knotImage">点击查看</a>
          </div>
          <div class="waiting" v-else>等待学生上传</div>
        </div>
      </div>
      <div class="btn">
        <el-button type="primary" @click="signUp('3')">审核通过</el-button>
        <el-button type="primary" @click="signUp('4')">审核不通过</el-button>
        <el-button @click="$router.push('mainTest')">返回</el-button>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: { signUpStatus: "", subjectId: "", signUpStatus: "", userId: "" },
      params: {
        userId: "",
        subjectId: "",
        signUpStatus: "",
      },
    };
  },
  created() {
    this.msg = Object.assign(
      {},
      this.msg,
      JSON.parse(sessionStorage.getItem("detail"))
    );
    console.log(this.msg);
  },
  methods: {
    async signUp(status) {
      this.params.userId = this.msg.userId;
      this.params.subjectId = this.msg.subjectId;
      this.params.signUpStatus = status; //通过3，拒绝4
      let res = await this.$axios.post(
        "/signUp/updateSignUpStatus",
        this.params
      );
      if (res.data.code == 0) {
        this.$message.success(res.data.msg);
        this.$router.push("/mainTest");
      }
    },
  },
};
</script>
<style lang="less" scoped>
.detail {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  // justify-content: center;
  .message {
    .title {
      height: 32px;
      font-size: 24px;
      font-weight: bold;
      line-height: 32px;
      color: #000000;
      opacity: 0.9;
      margin: 60px 0 30px 0;
    }
    .message-content {
      display: flex;
      margin-bottom: 24px;
      height: 16px;
      font-size: 14px;
      font-weight: 400;
      line-height: 16px;
      color: #000000;
      opacity: 0.9;
    }
    .message-pic {
      margin-bottom: 24px;
    }
    .pic {
      height: 120px;
      img {
        height: 100%;
      }
    }
    .message-book {
      margin-bottom: 40px;
      .right {
        img {
          width: 24px;
          margin-right: 8px;
        }
        a {
          vertical-align: middle;
          text-decoration: underline;
          font-size: 14px;
          font-weight: 400;
          color: #1169ff;
        }
      }
      .waiting {
        height: 16px;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        color: #ff792c;
        margin-left: 30px;
      }
    }
    .btn {
      .el-button.el-button--primary {
        background-color: #0a59f7;
        width: 120px;
      }
      .el-button.noUpStatus {
        background-color: #f24812;
        border-color: #f24812;
      }
      .el-button.el-button--default {
        width: 120px;
      }
    }
  }
}
</style>
